<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mua - 主页</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 主页/仪表盘 -->
        <div class="screen">
            <div class="screen-title">主页</div>
            <div class="dashboard">
                <div class="partner-info">
                    <div class="avatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div>
                        <div class="partner-name">小明 & 小红</div>
                        <div class="relationship-days">在一起 520 天</div>
                    </div>
                    <!-- 新增距离显示 -->
                    <div class="distance-badge">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>相距 2.5 公里</span>
                    </div>
                </div>
                
                <!-- 主要功能板块 -->
                <div class="feature-grid">
                    <div class="feature-card" data-page="calendar.html">
                        <div class="feature-icon">
                            <i class="fas fa-calendar-heart"></i>
                        </div>
                        <div class="feature-info">
                            <div class="feature-title">纪念日</div>
                            <div class="feature-desc">还有8天520纪念日</div>
                        </div>
                    </div>
                    
                    <div class="feature-card" data-page="period.html">
                        <div class="feature-icon">
                            <i class="fas fa-moon"></i>
                        </div>
                        <div class="feature-info">
                            <div class="feature-title">大姨妈</div>
                            <div class="feature-desc">预计还有3天</div>
                        </div>
                    </div>
                    
                    <div class="feature-card" data-page="battery.html">
                        <div class="feature-icon">
                            <i class="fas fa-battery-half"></i>
                        </div>
                        <div class="feature-info">
                            <div class="feature-title">电量</div>
                            <div class="feature-desc">TA的电量42%</div>
                        </div>
                    </div>
                    
                    <div class="feature-card" data-page="steps.html">
                        <div class="feature-icon">
                            <i class="fas fa-walking"></i>
                        </div>
                        <div class="feature-info">
                            <div class="feature-title">步数</div>
                            <div class="feature-desc">今日已走8,546步</div>
                        </div>
                    </div>
                    
                    <div class="feature-card" data-page="capsule.html">
                        <div class="feature-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="feature-info">
                            <div class="feature-title">时空胶囊</div>
                            <div class="feature-desc">有2个未解锁</div>
                        </div>
                    </div>
                    
                    <div class="feature-card" data-page="location.html">
                        <div class="feature-icon">
                            <i class="fas fa-map-marked-alt"></i>
                        </div>
                        <div class="feature-info">
                            <div class="feature-title">位置共享</div>
                            <div class="feature-desc">查看TA的位置</div>
                        </div>
                    </div>
                </div>
                
                <div class="bottom-nav">
                    <div class="nav-item active" data-page="dashboard.html">
                        <i class="fas fa-home"></i>
                        <span>主页</span>
                    </div>
                    <div class="nav-item" data-page="period.html">
                        <i class="fas fa-moon"></i>
                        <span>大姨妈</span>
                    </div>
                    <div class="nav-item" data-page="location.html">
                        <i class="fas fa-map-marked-alt"></i>
                        <span>位置</span>
                    </div>
                    <div class="nav-item" data-page="settings.html">
                        <i class="fas fa-cog"></i>
                        <span>设置</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
    <script>
        // 功能卡片点击跳转
        document.querySelectorAll('.feature-card').forEach(card => {
            card.addEventListener('click', function() {
                const page = this.getAttribute('data-page');
                if (page) {
                    window.location.href = page;
                }
            });
        });
        
        // 导航栏跳转
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function() {
                const page = this.getAttribute('data-page');
                if (page) {
                    window.location.href = page;
                }
            });
        });
    </script>
</body>
</html> 